<template>
  <div class="app-wrap">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="首页" name="first">
      <jdd-com-doc class="markdown-body"></jdd-com-doc>
    </el-tab-pane>
    <el-tab-pane label="印象笔迹" name="second">
      <ever-note></ever-note>
    </el-tab-pane>
    <el-tab-pane label="每日推荐" name="three">
      <video-list></video-list>
      </el-tab-pane>
      <el-tab-pane label="个人中心" name="four">
        <user-center></user-center>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
import { ref,watch } from "vue";
import {useRouter,useRoute} from "vue-router"
import jddComDoc from '../../md/jdd-com-doc.md';
import videoList from './modules/video-list';
import userCenter from './modules/user-center';
import everNote from './modules/ever-note';


export default {
  name: "HelloWorldPluginApp",
  components: { jddComDoc,videoList,userCenter,everNote },
  setup() {
    const router =useRouter();
    const route =useRoute();
    const activeName = ref(route.query.nav || 'second');
    const handleClick = (tab, event) => {
      console.log(tab, event);
    };

    watch(activeName,(value)=>{
      console.log('value',value)
      router.replace({
        name:"home",
        query:{
          nav:value
        }
      })
    },{
      immediate:true
    })

    

    return {
      activeName,
      handleClick,
    };
  },
};
</script>

<style  lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
}
.app-wrap{
  padding: 20px;
  width: 550px;
  overflow: hidden;
  height: 450px;
  ::v-deep .el-tabs__content{
    height: 400px;
    overflow-y: auto;
  }
}

</style>
<style>
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 12px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 5px #dcdfe6;
  box-shadow: inset 0 0 3px #dcdfe6;
  background: #dcdfe6;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ffffff;
}
</style>
